<!doctype html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Marx</title>
  <meta name="description" content="The stylish CSS reset.">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/marx.min.css">
</head>

<body>

  <main>
    <nav>
      <ul>
        <li><a href="#"><b>Marx</b></a></li>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </nav>

    <!-- article -->
    <article>
      <h1>Article
        <small>60%</small>
      </h1>
    </article>

    <!-- aside -->
    <aside>
      <h1>Aside
        <small>40%</small>
      </h1>
    </aside>

    <!-- section -->
    <section>
      <h1>Section
        <small>100%</small>
      </h1>
    </section>

    <article>
      <h2>Typography</h2>
      <h1>h1
        <small>small h1</small>
      </h1>
      <h2>h2
        <small>small h2</small>
      </h2>
      <h3>h3
        <small>small h3</small>
      </h3>
      <h4>h4
        <small>small h4</small>
      </h4>
      <h5>h5
        <small>small h5</small>
      </h5>
      <h6>h6
        <small>small h6</small>
      </h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ipsa tempore alias illum, in dicta sed laboriosam inventore sequi, accusantium magnam dolores modi commodi, magni labore illo a quisquam incidunt.</p>
      <p>
        <strong>strong tag</strong>, <b>b tag</b>,
        <em>em tag</em>, <i>italic tag</i>, <u>underline tag</u></p>
      <figcaption>Hello, world!</figcaption>
      <blockquote>"Capitalism? More like CRAPitalism, am I right?" - Karl Marx, probably.</blockquote>

      <pre>
        <code>
    pre {
      background: #efefef;
      color: #444;
      display: block;
      font-family: Menlo, monospace;
      font-size: 1.4rem;
      margin-bottom: .8remrem;
      padding: 1.6rem;
      word-break: break-all;
      word-wrap: break-word;
    }
    code {
      background: #efefef;
      color: #444;
      font-family: Menlo, monospace;
      font-size: 1.4rem;
      word-break: break-all;
      word-wrap: break-word;
    }</code>
      </pre>

      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>

      <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ol>

      <dl>
        <dt>Lorum Ipsum</dt>
        <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
        <dt>Lorum Ipsum</dt>
        <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
      </dl>

      <h2>Buttons</h2>
      <input type="submit" value="Submit">
      <input type="submit" value="Submit" disabled>
      <button>Hello</button>
      <button disabled>Hello</button>

      <h2>Forms</h2>
      <form>
        <div>
          <h4>Text Inputs</h4>
          <label for="name">Text Input:</label>
          <input type="text" name="name" id="name" value="" tabindex="1" placeholder="Text Input"><br>

          <label for="textarea">Textarea:</label>
          <textarea id="textarea" rows="4" cols="27" placeholder="Text Area"></textarea>
        </div>

        <div>
          <h4>Radio Buttons</h4>

          <label for="radio-choice-1">Radio 1:</label>
          <input type="radio" name="radio-1" id="radio-choice-1" tabindex="2" value="radio-1" /><br>
          <label for="radio-2">Radio 2:</label>
          <input type="radio" name="radio-1" id="radio-choice-2" tabindex="3" value="radio-2" />
        </div>

        <div>
          <h4>Checkbox Buttons</h4>

          <label for="checkbox1">Checkbox 1:</label>
          <input type="checkbox" name="checkbox" id="checkbox1" /><br>
          <label for="checkbox2">Checkbox 2:</label>
          <input type="checkbox" name="checkbox" id="checkbox2" />
        </div>

        <div>
          <h4>Dropdown Choices</h4>
          <label for="select-choice">Select Dropdown Choice:</label>
          <select name="select-choice" id="select-choice">
            <option value="Choice 1">Choice 1</option>
            <option value="Choice 2">Choice 2</option>
            <option value="Choice 3">Choice 3</option>
          </select>
        </div>

        <div>
          <input type="submit" value="Submit">
        </div>
      </form>

      <h2>Tables</h2>
      <table>
        <thead>
          <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
        </tbody>
      </table>
    </article>

    <aside>
      <h2>Images</h2>
      <img src="http://i.imgur.com/znOVmv9.png" alt="">

      <h2>Other</h2>
      <h1 align="center">align="center"</h1>
      <h1 align="right">align="right"</h1>
      <hr>
    </aside>

    <footer>
      &copy Matthew Blode 2015
    </footer>

  </main>
</body>

</html>
